import * as echarts from 'echarts'

/**
 * @description 绘制柱状图
 * @param {HTMLElement} dom
 * @param {Array} data -渲染参数
 * @param {Boolean} legendShow -图例是否显示
 * @param {Object} solidOption -solid实心饼图配置
 * @param {Object} hollowOption -hollow空心饼图配置
 */
function drewLine(
  dom = '',
  xData,
  yData,
) {
  if (!dom || !xData || !xData.length) return

  /**
   * @see https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align
   */
  const lineChart = echarts.init(dom)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: xData.length > 6 ? (6 / xData.length) * 100 : 100,
      },
    ],
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '15%',
      containLabel: true,
    },
    legend: {
      data: yData.map((r) => {
        return r.name
      }),
      right: 10,
      itemHeight: 2,
      textStyle: {
        color: '#666',
      },
      align: 'auto',
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLine: {
        lineStyle: {
          color: '#99a8b0',
          width: 2,
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: '#99a8b0',
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#99a8b0',
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#99a8b0',
        },
      },
      boundaryGap: [0, '10%'],
    },
    series: yData.map((item) => {
      return {
        ...item,
        type: 'bar',
        itemStyle: {
          color: item.color,
        },
      }
    }),
  }

  lineChart.setOption(option)

  window.addEventListener('resize', () => {
    lineChart.resize()
  })
}

export { drewLine }
